<template>
  <div class="demo">
    <div class="demo-title">嵌套子表格</div>
    <div class="demo-content">
      <Table :columns="columns" :data-source="data" class="components-table-demo-nested">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <a>Publish</a>
          </template>
        </template>
        <template #expandedRowRender>
          <Table :columns="innerColumns" :data-source="innerData" :pagination="false">
            <template #bodyCell="{ column }">
              <template v-if="column.key === 'state'">
                <span><Badge status="success" />Finished</span>
              </template>
              <template v-else-if="column.key === 'operation'">
                <span class="table-operation">
                  <a>Pause</a>
                  <a>Stop</a>
                  <Dropdown>
                    <template #overlay>
                      <Menu>
                        <Menu.Item>Action 1</Menu.Item>
                        <Menu.Item>Action 2</Menu.Item>
                      </Menu>
                    </template>
                    <a>More<DownOutlined /></a>
                  </Dropdown>
                </span>
              </template>
            </template>
          </Table>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { DownOutlined } from '@ant-design/icons-vue';
  import Badge from '@sscd/badge';
  import Dropdown from '@sscd/dropdown';
  import Menu from '@sscd/menu';
  import Table from '@sscd/table';
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Platform', dataIndex: 'platform', key: 'platform' },
    { title: 'Version', dataIndex: 'version', key: 'version' },
    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
    { title: 'Action', key: 'operation' },
  ];
  interface DataItem {
    key: number;
    name: string;
    platform: string;
    version: string;
    upgradeNum: number;
    creator: string;
    createdAt: string;
  }
  const data: DataItem[] = [];
  for (let i = 0; i < 3; ++i) {
    data.push({
      key: i,
      name: `Screem ${i + 1}`,
      platform: 'iOS',
      version: '10.3.4.5654',
      upgradeNum: 500,
      creator: 'Jack',
      createdAt: '2014-12-24 23:12:00',
    });
  }
  const innerColumns = [
    { title: 'Date', dataIndex: 'date', key: 'date' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Status', key: 'state' },
    { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    {
      title: 'Action',
      dataIndex: 'operation',
      key: 'operation',
    },
  ];
  interface innerDataItem {
    key: number;
    date: string;
    name: string;
    upgradeNum: string;
  }
  const innerData: innerDataItem[] = [];
  for (let i = 0; i < 3; ++i) {
    innerData.push({
      key: i,
      date: '2014-12-24 23:12:00',
      name: `This is production name ${i + 1}`,
      upgradeNum: 'Upgraded: 56',
    });
  }
</script>
